<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-row>
        <el-col :span="8" style="text-align: left">
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     icon="el-icon-edit" @click="receiveKey">收取钥匙
          </el-button>
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     :loading="downloadLoading" icon="el-icon-download" @click="exportExcel">导出
          </el-button>
        </el-col>
        <el-col :span="16" style="text-align: right">
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline"
                     @click="moreClick">更多
          </el-button>
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="theadCheckVal">
                  <el-checkbox label="ownerId">客户</el-checkbox>
                  <el-checkbox label="ownerOrderNo">订单号</el-checkbox>
                  <el-checkbox label="lotNo1">车架号</el-checkbox>
                  <el-checkbox label="keyStatus">是否收取钥匙</el-checkbox>
                  <el-checkbox label="carrierName">承运商</el-checkbox>
                  <el-checkbox label="materielId">车型名称</el-checkbox>
                  <el-checkbox label="materielName">车型描述</el-checkbox>
                  <el-checkbox label="plateNumber">车牌号</el-checkbox>
                  <el-checkbox label="lotNo2">物料编码</el-checkbox>
                  <el-checkbox label="lotNo3">颜色代码</el-checkbox>
                  <el-checkbox label="lotNo4">车型代码</el-checkbox>
                  <el-checkbox label="genMethod">创建方式</el-checkbox>
                  <el-checkbox label="gmtCreate">入库时间</el-checkbox>
                  <el-checkbox label="locationNo">库位</el-checkbox>
                  <el-checkbox label="userCreate">入库人</el-checkbox>
                  <el-checkbox label="storeHouseName">收货仓库</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
    </div>
    <div :class="{'search-transition':searchFlag,h0:true,hAuto:searchFlag,'search-content':true}">
      <el-form ref="form" :model="listQuery.condition" label-width="80px" :inline="true">
        <el-form-item label=车架号:>
          <el-input placeholder="请输入车架号" class="w200" clearable v-model="listQuery.condition.vinNo"></el-input>
        </el-form-item>
        <el-form-item label="车型:">
          <el-input placeholder="请输入车型名称" class="w200" clearable v-model="listQuery.condition.materielId"></el-input>
        </el-form-item>
        <el-form-item label="收取钥匙">
          <el-select v-model="listQuery.condition.keyStatus" placeholder="收取钥匙">
            <el-option label="未选择" value=""></el-option>
            <el-option label="未收取" value="10"></el-option>
            <el-option label="已收取" value="20"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入库时间:">
          <el-date-picker class="w200" v-model="listQuery.condition.startDate" type="datetime" placeholder="选择日期时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          align="right" :picker-options="timePicker"></el-date-picker>
          <span style="padding: 0 6px">至</span>
          <el-date-picker class="w200" v-model="listQuery.condition.endDate" type="datetime" placeholder="选择日期时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          align="right" :picker-options="timePicker"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchClick" style="margin-left: 10px">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="clean:both"></div>
    <el-table ref="paymentTable" :data="paymentList" v-loading="listLoading" element-loading-text="加载中"
              @selection-change="handleSelectionChange"
              border fit highlight-current-row style="width: 100%;margin-top:5px">
      <el-table-column type="selection" width="35"></el-table-column>
      <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in tableThead'
                       :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'genMethod'">{{scope.row[value.key] | putawayGenMethodFilter}}</div>
          <div v-else-if="value.key === 'keyStatus'">{{scope.row[value.key] | keyStatusFilter}}</div>
          <div v-else>{{scope.row[value.key]}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.current" :page-sizes="[10,20,30,50]" :page-size="listQuery.size"
                     layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total">
      </el-pagination>
    </div>

    <!--收取钥匙弹窗-->
    <el-dialog title="收取钥匙" width="40%" :visible.sync="dialogVisible" @close="handleClose">
      <hr>
      <el-row>
        <el-col style="width: 120px;text-align: right;margin-right: 10px;line-height: 32px;height: 32px;">车架号(vin)
        </el-col>
        <el-input placeholder="vin码-回车查询" v-model="scanQueryParams.lotNo1"
                  style="margin-right: 10px;width: 200px" clearable @keyup.enter.native="getReceiveKeyInfo"/>
        <el-input v-model="receiveKeyParams.id" v-show="false"></el-input>
        <span>
          <el-button type="primary" :disabled="receiveKeyParams.keyStatus === '20' || buttonDisable"
                     @click="confirmReceiveKey">确认收取</el-button>
          <el-button type="primary" :disabled="printCodeParam.printDisable"
                     @click="printQR">打印二维码</el-button>
        </span>
      </el-row>
      <hr>
      <el-form ref="outShipForm" :model="receiveKeyParams" label-width="120px" :inline="true">
        <el-form-item label="订单号: ">
          <div class="w200 printBig">{{isBlank(receiveKeyParams.ownerOrderNo)}}</div>
        </el-form-item>
        <el-form-item label="VIN: ">
          <div class="w200 printBig">{{isBlank(receiveKeyParams.lotNo1)}}</div>
        </el-form-item>
        <el-form-item label="车型:">
          <div class="w200 printBig">{{isBlank(receiveKeyParams.materielId)}}</div>
        </el-form-item>
        <el-form-item label="货主: ">
          <div class="w200 printBig">{{isBlank(receiveKeyParams.ownerId)}}</div>
        </el-form-item>
        <el-form-item label="收货仓库: ">
          <div class="w200 printBig">{{isBlank(receiveKeyParams.storeHouseName)}}</div>
        </el-form-item>
        <el-form-item label="入库时间: ">
          <div class="w200 printBig">{{isBlank(receiveKeyParams.gmtCreate)}}</div>
        </el-form-item>
        <el-form-item label="库区: ">
          <div class="w200 printBig">{{isBlank(receiveKeyParams.areaCode)}}</div>
        </el-form-item>
        <el-form-item label="库位: ">
          <div class="w200 printBig">{{isBlank(receiveKeyParams.locationCode)}}</div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--打印二维码弹窗-->
    <el-dialog title="打印二维码" width="500px" :visible.sync="printDialogFlag" append-to-body>
      <hr>
      <div id="printQRBox">
        <el-row>
          <el-col :span="8">
            <div class="print-QR-img">
              <img :src="printCodeParam.imgBase64Url" class="img_src_QR" alt="">
            </div>
          </el-col>
          <el-col :span="16">
            <el-row class="print-QR-row">
              <el-col>
                <span>底盘号：</span>
                <span>{{printCodeParam.lotNo1}}</span>
              </el-col>
            </el-row>
            <el-row class="print-QR-row">
              <el-col>
                <span>库位号：</span>
                <span>{{printCodeParam.areaCode}}</span>
                <span>{{printCodeParam.locationCode}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <span>订单号：</span>
                <span>{{printCodeParam.ownerOrderNo}}</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col style="margin-left: 340px">
          <el-button type="primary" @click="printQRConfirm">打印</el-button>
          <el-button type="primary" @click="printQRCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>

  </div>
</template>
<script>
  import * as recordAPI from '@/api/inbound/inboundRecord'
  import waves from '@/directive/waves' // 水波纹指令
  const defautlTableThead = [
    { key: 'ownerId', title: '客户', width: '' },
    { key: 'ownerOrderNo', title: '订单号', width: '' },
    { key: 'lotNo1', title: '车架号', width: 150 },
    { key: 'keyStatus', title: '是否收取钥匙', width: 150 },
    { key: 'carrierName', title: '承运商', width: 180 },
    { key: 'materielId', title: '车型名称', width: '' },
    { key: 'materielName', title: '车型描述', width: '' },
    { key: 'plateNumber', title: '车牌号', width: '' },
    { key: 'lotNo2', title: '物料编码', width: '' },
    { key: 'lotNo3', title: '颜色代码', width: '' },
    { key: 'lotNo4', title: '车型代码', width: '' },
    { key: 'genMethod', title: '创建方式', width: '' },
    { key: 'gmtCreate', title: '入库时间', width: 160 },
    { key: 'locationNo', title: '库位', width: '' },
    { key: 'userCreate', title: '入库人', width: '' },
    { key: 'storeHouseName', title: '收货仓库', width: '', fixed: 'right' }
  ]
  export default {
    name: 'payment',
    directives: {
      waves
    },
    data() {
      return {
        theadCheckVal: [
          'ownerId',
          'ownerOrderNo',
          'lotNo1',
          'keyStatus',
          'carrierName',
          'materielId',
          'materielName',
          'plateNumber',
          'lotNo2',
          'lotNo3',
          'lotNo4',
          'genMethod',
          'gmtCreate',
          'locationNo',
          'userCreate',
          'storeHouseName'
        ],
        tableThead: defautlTableThead,
        search: {},
        listQuery: {
          current: 1,
          size: 10,
          total: 0,
          condition: {
            vinNo: null,
            materielId: null,
            keyStatus: null,
            startDate: null,
            endDate: null
          }
        },
        paymentList: [],
        listLoading: true,
        searchFlag: false,
        multipleSelection: [],
        dialogVisible: false,
        scanQueryParams: {
          lotNo1: null
        },
        receiveKeyParams: {},
        printDialogFlag: false,
        printCodeParam: {
          printDisable: true,
          lotNo1: null,
          locationCode: null,
          areaCode: null,
          ownerOrderNo: null,
          imgBase64: null,
          imgBase64Url: null
        },
        buttonDisable: true,
        downloadLoading: false,
        downloadData: [],
        timePicker: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        pickerBeginDateBefore: {
          disabledDate: (time) => {
            const beginDateVal = this.$data.listQuery.condition.endDate
            if (beginDateVal) {
              return time.getTime() > beginDateVal
            }
          }
        },
        pickerBeginDateAfter: {
          disabledDate: (time) => {
            const beginDateVal = this.$data.listQuery.condition.startDate
            if (beginDateVal) {
              return time.getTime() < beginDateVal
            }
          }
        }
      }
    },
    created() {
      this.list()
    },
    watch: {
      theadCheckVal(valArr) {
        this.tableThead = defautlTableThead.filter(v => {
          for (let i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      }
    },
    methods: {
      list() {
        // 列表查询
        this.$data.listLoading = true
        // 处理是否展开更多
        let queryParam = {}
        if (this.$data.searchFlag) {
          queryParam = this.$data.listQuery
        } else {
          Object.assign(queryParam, this.$data.listQuery)
        }
        queryParam.condition.houseId = this.$store.getters.currentStorehouse.id
        recordAPI.selectPutawayPage(queryParam).then(result => {
          this.$data.listLoading = false
          if (result.code === 0) {
            this.$data.paymentList = result.data.records
            this.$data.listQuery.total = result.data.total
          } else {
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      receiveKey() {
        const that = this
        that.dialogVisible = true
//        if (this.multipleSelection) {
//          const that = this
//          const selects = that.multipleSelection
//          if (selects.length === 0) {
//            this.$message({
//              title: '错误提示',
//              message: '请选择要收取钥匙的数据',
//              type: 'warning',
//              duration: 2000
//            })
//          } else if (selects.length > 1) {
//            this.$message({
//              title: '错误提示',
//              message: '只能选择一行数据',
//              type: 'warning',
//              duration: 2000
//            })
//          } else {
//            that.scanQueryParams.lotNo1 = that.multipleSelection[0].lotNo1
//            that.dialogVisible = true
//          }
//        }
      },
      getReceiveKeyInfo() {
        const queryParam = {}
        queryParam.lotNo1 = this.scanQueryParams.lotNo1
        queryParam.houseId = this.$store.getters.currentStorehouse.id
        recordAPI.getReceiveKeyInfo(queryParam).then(result => {
          if (result.code === 0) {
            this.receiveKeyParams = result.data
            // 赋值给打印
            this.printCodeParam.printDisable = false
            this.buttonDisable = false
            this.printCodeParam.areaCode = result.data.areaCode
            this.printCodeParam.lotNo1 = result.data.lotNo1
            this.printCodeParam.locationCode = result.data.locationCode
            this.printCodeParam.ownerOrderNo = result.data.ownerOrderNo
          }
        }).catch(() => {
          this.printCodeParam.printDisable = true
          this.buttonDisable = true
        })
      },
      confirmReceiveKey() {
        const params = {}
        params.putawayLineId = this.receiveKeyParams.id
        this.buttonDisable = true
        recordAPI.confirmReceiveKey(params).then(result => {
          this.buttonDisable = false
          if (result.code === 0) {
            this.buttonDisable = true
            this.$message({
              type: 'info',
              message: '钥匙收取成功',
              duration: 2000
            })
          }
        })
      },
      // 打印二维码
      printQR() {
        const that = this
        if (!that.printCodeParam.printDisable) {
          const param = {}
          param.lotNo1 = that.printCodeParam.lotNo1
          recordAPI.getKeyPrintInfo(param).then(result => {
            if (result.code === 0) {
              this.printDialogFlag = true
              this.printCodeParam.imgBase64 = result.data.imgBase64
              this.printCodeParam.imgBase64Url = 'data:image/png;base64,' + result.data.imgBase64
            }
          })
        }
      },
      // 确认打印
      printQRConfirm() {
        const that = this
        const localNo = that.printCodeParam.areaCode + ' ' + that.printCodeParam.locationCode
        if (this.tools.checkPrintInstall()) {
          // this.tools.printHTML(document.getElementById('printQRBox').innerHTML, 790, 1)
          this.tools.printQrImp(that.printCodeParam.imgBase64, that.printCodeParam.lotNo1, localNo, that.printCodeParam.ownerOrderNo)
        }
      },
      // 取消打印
      printQRCancel() {
        this.printDialogFlag = false
      },
      changeStatus() {
        return this.downloadData.map(v => {
          if (v.genMethod === '10') {
            v.genMethod = '手工创建'
          } else if (v.genMethod === '20') {
            v.genMethod = '订单中心'
          } else if (v.genMethod === '30') {
            v.genMethod = 'OTM'
          } else if (v.genMethod === '40') {
            v.genMethod = 'APP'
          } else if (v.genMethod === '50') {
            v.genMethod = '君马'
          } else if (v.genMethod === '60') {
            v.genMethod = '扫码触发'
          } else if (v.genMethod === '70') {
            v.genMethod = '道闸'
          }
          return v
        })
      },
      exportExcel() {
        // 数据导出
        let queryParam = {}
        if (this.$data.searchFlag) {
          queryParam = this.$data.listQuery.condition
        } else {
          Object.assign(queryParam, this.$data.listQuery.condition)
        }
        queryParam.houseId = this.$store.getters.currentStorehouse.id
        this.downloadLoading = true
        recordAPI.exportData(queryParam).then(result => {
          this.downloadLoading = false
          if (result.code === 0) {
            this.downloadData = result.data
            if (this.downloadData.length) {
              const arr = this.changeStatus()
              require.ensure([], () => {
                const { export_json_to_excel } = require('@/vendor/Export2Excel')
                const tHeader = ['客户', '车架号', '车型', '入库时间', '入库方式', '入库人', '库位']
                const filterVal = ['ownerId', 'lotNo1', 'materielId', 'gmtCreate', 'genMethod', 'userCreate', 'locationNo']
                const data = this.formatJson(filterVal, arr)
                export_json_to_excel(tHeader, data, this.filename)
              })
            }
          } else {
            this.$message({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      isBlank(val) {
        if (val) {
          return val
        } else {
          return ''
        }
      },
      handleClose() {
        // 关闭
        this.dialogVisible = false
        this.scanQueryParams = {
          lotNo1: null
        }
        this.printCodeParam = {
          printDisable: true,
          lotNo1: null,
          locationCode: null,
          areaCode: null,
          ownerOrderNo: null,
          imgBase64: null,
          imgBase64Url: null
        }
        this.buttonDisable = true
        this.receiveKeyParams = {}
        this.reset()
      },
      handleSizeChange(val) {
        // 分页size变化
        this.$data.listQuery.size = val
        this.list()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleCurrentChange(val) {
        // 分页当前页变化
        this.$data.listQuery.current = val
        this.list()
      },
      moreClick() {
        // 更多click
        this.$data.searchFlag = !this.$data.searchFlag
      },
      searchClick() {
        // 搜索
        this.list()
      },
      reset() {
        this.$data.listQuery.condition = {
          vinNo: null,
          materielCode: null,
          startDate: null,
          endDate: null
        }
        this.list()
      }
    }
  }
</script>
<style scoped>

</style>
